{% extends "base.html" %}

{% block title %}编辑YAML{% endblock %}

{% block head %}
{{ super() }}

{% endblock %}


{% block content %}
<!-- 页面头-->
<section class="content-header">
  <!--头部标题-->
  <h1>
    编辑YAML
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li><a href="/blues/blues/clusterler/cluster">集群管理</a></li>
    <li class="active">编辑YAML</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div>
        <p>
          集群: <span>{{cluster_name}}</span>&nbsp;&nbsp;&nbsp;
          命名空间: <span id="namespace"></span>&nbsp;&nbsp;&nbsp;
          资源类型: <span id="workload_type"></span>&nbsp;&nbsp;&nbsp;
          名称: <span id="workload_name"></span>
        </p>
      </div>
      <div class="flex">
        <textarea class="form-control" rows="25" id="editor"></textarea>
        <!--        <pre id="editor">adfads</pre>-->
      </div>

      <div class="col-xs-12" style="text-align: center">
        {% if session['role'] != 'user'%}
        <button class="btn btn-warning" type="button" id="btn_apply">应用</button>
        <span>（此操作相当于 kubectl apply -f ）</span>
        {% endif %}

      </div>


    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->
{% endblock %}


{% block script %}

<script src="/static/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    // 页面载入后执行
    $(function () {
        // 解析URL
        var pathName = window.document.location.pathname;
        var pathList = pathName.split("/")        // 例如 /cluster/ 被解析为 ['', 'cluster', '']
        console.log(pathList)
        var cluster_id = pathList[2]
        var namespace = pathList[3]
        var workload_type = pathList[4]
        var workload_name = pathList[5]
        $('#namespace').text(namespace)
        $('#workload_type').text(workload_type)
        $('#workload_name').text(workload_name)

        // 调取API获取资源yaml，然后初始化editor代码编辑区
        var editor
        var url = '/api/cluster/' + cluster_id + '/' + namespace + '/' + workload_type + '/' + workload_name + '/yaml'
        $.get(url, function (data) {
            console.log(data)
            let l = Math.round(($(window).height() - 200) / 16)

            $('#editor').html(data.yaml)
            editor = ace.edit("editor", {
                theme: "ace/theme/textmate",
                mode: "ace/mode/yaml",
                // autoScrollEditorIntoView: true,
                wrap: true,
                maxLines: l,
                minLines: 30,
                navigateWithinSoftTabs: true,
                fontSize: 12
            });
            // editor.setValue(data.yaml)
        })

        // 调整窗口大小时，改变代码编辑区大小
        $(window).resize(function () {
            let l = Math.round(($(window).height() - 200) / 16)
            editor.setOption("maxLines", l);
        })

        // 应用按钮按下
        $('#btn_apply').click(function () {
            bootbox.confirm("确定应用修改?", function (result) {
                    if (result) {
                        // console.log($('#editor').val())
                        $.ajax({
                            method: 'POST',
                            url: '/api/v1/cluster/' + cluster_id + '/' + namespace + '/' + workload_type + '/' + workload_name + '/replace',
                            data: JSON.stringify({data: editor.getValue()}),
                            dataType: 'text',
                            headers: {'Content-Type': 'application/json; charset=utf-8'},
                            success: function (result) {
                                let data = JSON.parse(result)
                                console.log(data)
                                if (data.code < 300) {
                                    bootbox.alert("应用成功", function () {
                                        let resource_url = '/cluster/' + workload_type + '/?cluster_id=' + cluster_id + '&namespace=' + namespace + '&name=' + workload_name
                                        location.href = resource_url
                                        // history.back()
                                    })
                                    return;
                                }
                                if (data.code >= 300) {
                                    bootbox.alert(data.msg.message)
                                    return;
                                }
                            }
                        })
                    }
                }
            );
        })

    });
</script>
{% endblock %}